<template>
  <div class="hello">
    <SouSuo />
    <div class="header" align="center">
      <div>
        <span class="iconfont icon-jiangbei"></span>
        <p>排行</p>
      </div>
      <div>
        <span class="iconfont icon-daohangfenlei"></span>
        <p>分类</p>
      </div>
      <div>
        <span class="iconfont icon-yooxi"></span>
        <p>新游</p>
      </div>
      <div>
        <span class="iconfont icon-danji"></span>
        <p>单机</p>
      </div>
      <div>
        <span class="iconfont icon-qq"></span>
        <p>腾讯</p>
      </div>
    </div>
    <div class="xialun">
      <div class="danlu" v-for="(item,index) of plays_list" :key="index" >
        <img :src="item .src" alt class="imgs" />
        <div class="itma">
          <p class="namz">{{item.textz}}</p>
          <p class="nama">{{item.textp}}</p>
          <p class="name">{{item.textmoney}}次下载<span>{{item.textsize}}</span></p>
        </div>
        <p class="namo">下载</p>
      </div>
    </div>
  </div>
</template>

<script>
import SouSuo from "./container/sousuo.vue";

export default {
  components: {
    SouSuo
  },
  data(){
    return {
      plays_list:[],
      chan_list:[]
    }
  },
  created() {
    this.axios
      .get(
        "https://www.easy-mock.com/mock/5d22b07122209809144c8ca2/example/ruanjians"
      )
      .then(res => {
        this.plays_list = res.data.data.register;
      });
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.hello {
   .xialun {
    width: 100%;
    height: auto;
    margin-bottom: 5rem;
    .danlu {
      width: 100%;
      height: 4.6rem;
      position: relative;
      background-color: #fff;
      margin-top: 1rem;
      .imgs {
        width: 3rem;
        height: 3rem;
        display: inline-block;
        margin-top: 1rem;
        margin-left: 1rem;
      }
      .itma {
        position: absolute;
        width: 15rem;
        background-color: #fff;
        left: 4.3rem;
        top: 0.9rem;
        .namz{
          font-size: 0.9rem;
          font-weight: 600;
          color: black;
        }
        p {
          display: block;
        }
        .nama {
           width: 15rem;
          font-size: 0.7rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: black;
          margin-top: -0.3rem;
        }
        .name {
          width: 10rem;
          font-size: 0.7rem;
          height: 1.3rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: -0.4rem;
          span{
            margin-left: 0.6rem;
          }
        }
      }
      .namo {
        float: right;
        font-size: 0.5rem;
        width: 2rem;
        height: 1.4rem;
        line-height: 1.4rem;
        background-color: #fff;
        color: blue;
        border-radius: 0.2rem;
        border: 0.05rem solid blue;
        text-align: center;
        margin: 2rem 1rem 0 0;
      }
    }
  }
  .header {
    width: 100%;
    height: 4rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    div {
      width: 18%;
      height: 48%;
      margin-top: 0.5rem;
      span {
        margin-top: 0.2rem;
        display: inline-block;
        font-size: 1.2rem;
      }
      p {
        display: block;
        margin-top: 0.3rem;
        font-size: 0.7rem;
        color: black;
      }
    }
    div:nth-child(1) {
      color: rgb(201, 204, 19);
    }
    div:nth-child(2) {
      color: rgb(255, 255, 255);
      span {
        background-color: rgb(23, 58, 214);
      }
    }
    div:nth-child(3) {
      color: rgb(255, 255, 255);
      span {
        background-color: rgb(214, 23, 128);
        border-radius: 50%;
      }
    }
    div:nth-child(4) {
      color: rgb(21, 226, 38);
    }
    div:nth-child(5) {
      color: rgb(19, 53, 204);
    }
    div:nth-child(6) {
      color: rgb(204, 19, 173);
    }
    div:nth-child(7) {
      color: rgb(219, 109, 18);
    }
    div:nth-child(8) {
      color: rgb(221, 68, 101);
    }
    div:nth-child(9) {
      color: rgb(240, 47, 137);
    }
    div:nth-child(10) {
      color: rgb(243, 201, 13);
    }
  }
}
</style>

